<template>
	<view class="container contes">
		<view class="head-title">
			<view class="icon" @click="navback">
				<u-icon name="arrow-left" :size="20"></u-icon>
			</view>
			手机登录
		</view>
		<view class="logoimg">
			<view class="">
				<image :src="store.logotype==1?'../../static/homeimg/login.png':'../../static/homeimg/logotwo.jpg'"
					class="img" mode="aspectFit"></image>
			</view>
		</view>
		<view class="title">
			{{store.logotype==1?'点老板':'咚点西点'}}
		</view>
		<view class="from">
			<uv-form labelPosition="left" :model="forms" :rules="rules" ref="forma" labelWidth="0">
				<uv-form-item label="" prop="phone">
					<!-- 	<u-input placeholder="请输入手机号" class="inputclass" v-model="forms.phone" border="none">
					</u-input> -->
					<input type="text" v-model="forms.phone" placeholder="请输入手机号" class="inputclass" />
				</uv-form-item>
				<uv-form-item label="" prop="telCode" labelWidth="0">
					<!-- <u-input placeholder="请输入验证码" class="inputclass" v-model="forms.telCode" border="none"
						suffixIconStyle="bgckground:#000">
						<template v-slot:suffix>
							<uv-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"
								suffixIconStyle="bgckground:#000"></uv-code>
							<uv-button @click="getCode" :text="tips" type="success" size="mini"
								style="background-color: #fff;"></uv-button>
						</template>
					</u-input> -->
					<view>
						<view class="codemsg">
							<input type="text" v-model="forms.telCode" placeholder="请输入验证码" class="inputclassa" />
							<view class="codeget">
								<uv-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"
									suffixIconStyle="bgckground:#000"></uv-code>
								<view @click="getCode" boder="none"
									style="background-color: #fff;padding:0 30rpx;height: 68rpx;line-height: 68rpx;color: #FE861C;font-size: 28rpx;text-align: center;border-radius: 10rpx;">
									{{tips}}
								</view>
							</view>
						</view>
					</view>

				</uv-form-item>
				<view class="button" @click="submit">登录</view>
			</uv-form>
		</view>
		<!-- 		<view class="onejianlogin">手机号一键登录</view>
		<view class="onejianlogin mt20">手机号登录注册</view> -->
	</view>
</template>

<script setup>
	import {
		useStore
	} from '@/stores/user.js'
	const store = useStore();
	import {
		toast
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import {
		phoneloginin,
		sendmessage
	} from '@/api/home.js'
	import {
		ref,
		reactive
	} from "vue"
	import form from '../../uni_modules/uview-plus/libs/config/props/form';
	const tips = ref("")
	const uCode = ref(null)
	const codeChange = (text) => {
		tips.value = text;
	}
	const forms = reactive({
		phone: "",
		code: "",
		telCode: "",
		wtelCode: "",
		loginType: 2,
		isAgreement: true
	})
	const rules = {
		'phone': {
			type: 'string',
			required: true,
			message: '请填写手机号',
			trigger: ['blur', 'change']
		},
		'telCode': {
			type: 'string',
			max: 6,
			required: true,
			message: '请输入验证码',
			trigger: ['blur', 'change']
		}
	}
	const forma = ref(null)
	const phoneruls = /1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}/
	const submit = () => {
		switch (true) {
			case forms.phone == '':
				uni.showToast({
					icon: 'none',
					title: "请输入手机号"
				})
				return;
			case !phoneruls.test(forms.phone):
				uni.showToast({
					icon: 'none',
					title: "手机号格式错误"
				})
				return;
			case forms.telCode == '':
				uni.showToast({
					icon: 'none',
					title: "请输入验证码"
				})
				return;
		}

		forma.value.validate().then(res => {
			uni.login({
				"provider": "weixin",
				"onlyAuthorize": true, // 微信登录仅请求授权认证
				success: function(event) {
					const {
						code
					} = event
					phoneloginin({
						...forms,
						code
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
							uni.setStorageSync('loginTokenKey', res.result.accessToken)
							uni.switchTab({
								url: "/pages/index/index"
							})
						}
					}).catch(err => {
						uni.showToast({
							icon: "none",
							title: err.msg
						})
					})
				},
				fail: function(err) {
					// 登录授权失败  
					// err.code是错误码
				}
			})

		}).catch(errors => {
			uni.showToast({
				icon: 'none',
				title: '校验失败'
			})
		})
	}
	const navback = () => {
		uni.navigateBack(-1)
	}
	const getCode = () => {
		console.log("获取")
		switch (true) {
			case forms.phone == "":
				uni.showToast({
					icon: "none",
					title: "请输入手机号"
				})
				return;
		}
		if (uCode.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码'
			})
			sendmessage({
				phone: forms.phone,
				msgType: 1
			}).then(res => {
				if (res.code == 200) {
					// setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					uCode.value.start();
					// }, 2000);
				}
			}).catch(err => {
				console.log(err)
			})
			// setTimeout(() => {
			// 	uni.hideLoading();
			// 	// 这里此提示会被this.start()方法中的提示覆盖
			// 	toast('验证码已发送');
			// 	// 通知验证码组件内部开始倒计时
			// 	uCode.value.start();
			// }, 2000);
		} else {
			toast('倒计时结束后再发送');
		}
	}
</script>

<style scoped lang="scss">
	.head-title {
		text-align: center;
		padding-top: 100rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0A0A0A;
		position: relative;

		.icon {
			position: absolute;
			left: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.button {
		background-color: #FE861C;
		color: #fff;
		text-align: center;
		background: #FE861C;
		height: 98rpx;
		line-height: 98rpx;
		font-size: 32rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.inputclass {
		padding: 27rpx 0;
		padding-left: 20rpx;
		background-color: #F4F4F4 !important;
		// margin-bottom: 40rpx;
		border-radius: 20rpx;
		// padding: 20rpx 0 !important;
	}

	.codemsg {
		width: 100%;
		position: relative;
	}

	.inputclassa {
		padding: 27rpx 0;
		padding-left: 20rpx;
		background-color: #F4F4F4 !important;
		// margin-bottom: 40rpx;
		border-radius: 20rpx;
		// padding: 20rpx 0 !important;
	}

	.codeget {
		position: absolute;
		right: -190rpx;
		top: 20rpx;
		z-index: 10;
	}

	/* #ifdef MP-WEIXIN */

	.inputclass {
		padding: 27rpx 0;
		padding-left: 30rpx;
		background-color: #f0f0f0 !important;
		// margin-bottom: 40rpx;
		border-radius: 20rpx;
		// padding: 20rpx 0 !important;
	}

	.codemsg {
		width: 100%;
		position: relative;
	}

	.inputclassa {
		padding: 27rpx 0;
		padding-left: 30rpx;
		background-color: #f0f0f0 !important;
		// margin-bottom: 40rpx;
		border-radius: 20rpx;
		// padding: 20rpx 0 !important;
	}

	.codeget {
		position: absolute;
		right: 15rpx;
		top: 15rpx;
		border-radius: 10rpx;
	}

	/* #endif */
	::v-deep(.uv-form-item.data-v-d1e73275) {}

	.backgrd {
		background-color: #F4F4F4;
		padding: 15rpx 0;
	}

	.from {
		width: 586rpx;
		margin: 0 auto;
	}

	// .inputbgc {
	// 	padding: 10rpx 0;
	// 	background-color: #F4F4F4 !important;
	// }

	.title {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		text-align: center;
		padding-bottom: 160rpx;
	}

	.container {
		height: 100vh;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.onejianlogin {
		width: 566rpx;
		height: 98rpx;
		background: #FE861C;
		line-height: 98rpx;
		color: #fff;
		border-radius: 20rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.onejianlogins {
		width: 566rpx;
		height: 98rpx;
		line-height: 98rpx;
		color: #fff;
		border-radius: 20rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FE861C;
		border: 1px solid #FE861C;
	}

	.logoimg {
		width: 100%;
		display: flex;
		justify-content: center;
		padding-top: 160rpx;

		.img {
			width: 144rpx;
			height: 144rpx;
			border-radius: 20rpx;
		}
	}

	.ischeckbox {
		width: 100%;
		margin-left: 108rpx;
		margin-top: 40rpx;
		display: flex;

		.textagree {
			font-size: 24rpx;
			color: #B7B7B7;
		}
	}

	.mt20 {
		margin-top: 40rpx;
	}

	.mb20 {
		margin-bottom: 40rpx;
	}

	.contes {
		height: calc(100vh - 100rpx);
		background: url('@/static/homeimg/bgc.png') no-repeat;
		background-size: 100% 100%;
		overflow-x: hidden;
	}
</style>